import React, { Component } from 'react'
import {nanoid} from 'nanoid'
import { connect } from 'react-redux'
import * as actions from '../../redux/actions/person'

export default connect(state=>({persons:state.persons,count:state.count}),{...actions})(class Person extends Component {

  addPerson=()=>{
    const {addPerson} =this.props
    const name = this.nameNode.value
    const age = this.ageNode.value*1
    addPerson({id:nanoid(),name,age})
    this.nameNode.value=''
    this.ageNode.value=''
  }

  render() {
    const {persons,count} =this.props
    return (
      <div>
        <h2>我是Preson组件，上方组件求和为{count}</h2>
        <input ref={e=>this.nameNode=e} type="text" placeholder='输入姓名'/>
        <input ref={e=>this.ageNode=e} type="number" placeholder='输入年龄'/>
        <button onClick={this.addPerson}>添加</button>
        <ul>
          {
            persons.map(i=>(
              <li key={i.id}>姓名:{i.name} -- 年龄:{i.age}</li>
            ))
          }
        </ul>
      </div>
    )
  }
}
)
